<template>
  <view>
    <!-- 专辑背景 -->
    <view class="album_bg">
      <image mode="widthFix"
             :src="album.cover"/>
        <view class="album_info">
          <view class="album_name">{{album.name}}</view>
          <view class="album_btn">关注专辑</view>
        </view>
    </view>
    <!-- 专辑描述 -->
   <view class="album_author">
     <view class="album_author_info">
       <image mode="widthFix"
               :src="user.avatar"></image>
          <view class="album_author_name">{{user.name}}</view>
      </view>
      <view class="album_author_desc"><text>{{album.desc}}</text></view>
    </view>
    </view>
</template>

<script>
import goDetail from '@/components/goDetail'
export default {
  
  data () {
    return {
      params: {
        limit: 30,
        order: 'new',
        skip: 0,
        // “1” 表示第一次请求 返回值有album对象
        // “0”表示不是第一次请求 返回值只有wallpaper对象
        first: 1
      },
      id: -1,
      album: {
	  },
      hasMore: true,
	  user: {	  
	  },
    }
  },
  comments:{
  	goDetail
  },
  onLoad (options) {
    this.id = options.id
    this.getList()
  },
  onReachBottom () {
    if (this.hasMore) {
      this.params.first = 0;
      this.params.skip += this.params.limit;
      this.getList();
    } else {
      this.showToast()
    }
  },
  methods: {
	  getList(){
		  this.request({
		      url: ` https://service.picasso.adesk.com/v1/wallpaper/album/${this.id}/wallpaper`,
		      data: this.params
		    }).then(result=>{
		  	  // album是对象 Object.keys()返回值是数组
		  	  console.log(result);
		  	  if (Object.keys(this.album).length === 0) {
		  	    this.album = result.res.album;
				this.user = result.res.album.user;
		  	  }
		    })    
	  }
    },
  }
</script>

<style lang="scss" scoped>
.album_bg {
  position: relative;
  image {
  }

  .album_info {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    height: 80rpx;
    align-items: center;
    color: #fff;
    padding: 0 15rpx;
    .album_name {
      font-size: 40rpx;
    }

    .album_btn {
      background-color: $color;
      width: 152rpx;
      height: 60rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 10rpx;
    }
  }
}
.album_author {
  padding: 10rpx;
  .album_author_info {
    padding: 10rpx 0;
    display: flex;
    image {
      width: 50rpx;
    }

    .album_author_name {
      color: #000;
      margin-left: 15rpx;
    }
  }

  .album_author_desc {
  }
}

</style>